<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="">
			省份：<select name="" id="provinceId" onchange="changeProvince()">
				     <option value="-1">请选择省份</option>
			     </select>
		    城市：<select name="" id="cityId" onchange="changeCity()">
		    	    <option value="-1">请选择城市</option>
		         </select>
			区县：<select name="" id="countyId" onchange="changeCounty()">
				    <option value="-1">请选择区县</option>
			     </select>
				 <br />
			你选择的是：<label id="selectValue"></label>
		</div>
	</body>
	<script type="text/javascript">
		var provinces=['北京市','上海市','福建省','广东省','浙江省'];
		provinces.push('江苏省')
		var citys=[
		['海淀区',' 朝阳区'],
			['浦东','浦西'],
			['福州市','厦门市','龙岩市'],
			['广州市','深圳市','东莞市'],
			['杭州市','温州市'],
			['南京市','苏州市']
		];
		var counts=[
			['海淀街道','朝阳街道'],
			['潍坊新村街道','黄浦区'],
			['鼓楼区','思明区','新罗区'],
			['海珠','福田','石碣镇'],
			['上城区','鹿城'],
			['玄武区','姑苏区']
		];
		
		function changeProvince(){
			var provinceObj=document.getElementById('provinceId');
			var cityObj=document.getElementById('cityId');
			var countObj=document.getElementById('countyId');
			cityObj.innerHTML=`<option value="-1">请选择城市</option>`;
			if(provinceObj.value==-1){
				return;
			}
			var city=citys[provinceObj.value];
			for(var i=0;i<city.length;i++){
				cityObj.innerHTML+=`<option value="`+i+`">`+city[i]+`</option>`;
			}
			
			// countObj.innerHTML=`<option value="-1">请选择区县</option>`;
			// if(cityObj.value==-1){
			// 	return;
			// }
			// var count=counts[cityObj.value];
			// for(var j=0;j<count.length;j++){
			// 	countObj.innerHTML+=`<option value="`+j+`">`+count[j]+`</option>`;
			// }
			
		}
		function changeCity(){
		var provinceObj=document.getElementById('provinceId');
		var cityObj=document.getElementById('cityId');
		var countObj=document.getElementById('countyId');
			
			 countObj.innerHTML=`<option value="-1">请选择区县</option>`;
			 if(cityObj.value==-1){
			 	return;
			 }
			 var count=counts[cityObj.value];
			 for(var j=0;j<count.length;j++){
			 	countObj.innerHTML+=`<option value="`+j+`">`+count[j]+`</option>`;
			 }
		}
		function changeCount(){
			var provinceObj=document.getElementById('provinceId');
			var cityObj=document.getElementById('cityId');
			var countObj=document.getElementById('countyId');
			var provinceName=provinces[provinceObj.value];
			var cityName=citys[provinceObj.value][cityObj.value];
			var countName=counts[provinceObj.value][cityObj.value][countObj.value];
			
			var selectObj=document.getElementById('selectValue');
			selectObj.innerText=provinceName+":"+cityName+":"+countName;
		}
		
		onload=function(){
			var provinceObj=document.getElementById('provinceId');
			for(var i=0;i<provinces.length;i++){
				provinceObj.innerHTML+=`<option value="`+i+`">`+provinces[i]+`</option>`;
			}
			
			var cityObj=document.getElementById('cityId');
			for(var j=0;j<citys.length;j++){
				cityObj.innerHTML+=`<option value="`+j+`">`+citys[j]+`</option>`;
			}
		}
	</script>
</html>
